<template>
  <a-card class="card_wrap">
    <!-- 卡片标题 -->
    <div class="title_box">参数</div>

    <!-- 参数卡片内容 -->
    <div class="content_box">
      <div class="content_item_box" v-for="(psl, index) in props.paramStandardList" :key="index">
        <span class="paramNum_span">参数项-{{ index + 1 }}</span>
        <span class="paramTitle_span"> 参数名称 </span>
        <a-select
          ref="select"
          class="paramsSelect"
          v-model:value="psl.paramName"
          style="width: 120px"
          @change="paramNameChange"
        >
          <a-select-option
            v-for="pdl in props.paramDataList"
            :key="pdl.id"
            :value="pdl.dictName"
            :disabled="pdl.isDisabled"
            >{{ pdl.dictName }}</a-select-option
          >
        </a-select>
        <span class="paramTitle_span"> 参数标准 </span>
        <a-select
          ref="select"
          class="paramsSelect"
          v-model:value="psl.paramTypeName"
          style="width: 120px"
        >
          <a-select-option
            v-for="pstl in props.paramSelectTypeList"
            :key="pstl.id"
            :value="pstl.typeName"
            >{{ pstl.typeName }}</a-select-option
          >
        </a-select>
        <!-- 小于等于 / 大于等于 单输入框 -->
        <a-input-number
          style="width: 120px; margin-right: 16px"
          v-if="psl.paramTypeName != '两者之间'"
          v-model:value="psl.standRangeSingle"
          :step="0.1"
        ></a-input-number>

        <!-- 两者之间 双输入框 -->
        <div
          v-if="psl.paramTypeName == '两者之间'"
          style="display: inline-block; margin-right: 16px"
        >
          <a-input-number
            style="width: 120px"
            v-model:value="psl.standRangeLeft"
            :step="0.1"
          ></a-input-number>
          <span> - </span>
          <a-input-number
            style="width: 120px"
            v-model:value="psl.standRangeRight"
            :step="0.1"
          ></a-input-number>
        </div>

        <!-- <span class="unit_span">mg/L</span> -->
        <span class="paramTitle_span"> 参数备注 </span>
        <a-input style="width: 220px" v-model:value="psl.standRangeDesc"></a-input>

        <!-- 删除图标 -->
        <div class="del_item_icon">
          <a-tooltip placement="bottom">
            <template #title>
              <span>点击删除{{ psl.paramName }}标准项</span>
            </template>
            <DeleteTwoTone
              twoToneColor="#ee4a4f"
              @click="delParamStandRangeItemClick(psl.paramName)"
            />
          </a-tooltip>
        </div>
      </div>
    </div>

    <!-- 卡片底部的图标 -->
    <div class="param_footer_plus_box">
      <a-tooltip placement="bottom">
        <template #title>
          <span>点击添加参数项</span>
        </template>
        <PlusSquareTwoTone @click="addParamStandardClick" class="param_plus_icon" style="" />
      </a-tooltip>
    </div>
  </a-card>
</template>

<script lang="ts">
  import {defineComponent, ref, onMounted} from 'vue'
  export default defineComponent({
    name: 'ParamCard'
  })
</script>
<script lang="ts" setup>
  // 引入
  import {getUserId} from '@/libs/auth'
  import {
    standardSelectType,
    standardSelectTypeList,
    paramType,
    paramTypeList,
    devType,
    devTypeList,
    paramStandard
    // paramStandardList
  } from './type.ts'
  import {PlusSquareTwoTone, DeleteTwoTone} from '@ant-design/icons-vue'
  import {selectDevListApi, selectParamListApi} from '@/api/quickConfiguration_standard.ts'
  import {message} from 'ant-design-vue'

  const props = defineProps([
    'paramSelectTypeList',
    'paramStandardList',
    'paramDataList',
    'devDataList'
  ])

  // 参数名称选择的Change事件
  const paramNameChange = (e: string) => {
    let nParamStandardList = props.paramStandardList
    console.log(nParamStandardList)

    let selectedParamNameList: string[] = []
    nParamStandardList.forEach((item: paramStandard) => {
      selectedParamNameList.push(item.paramName)
    })
    console.log(selectedParamNameList)

    // 将选择过的参数名称变为不可选状态
    props.paramDataList.forEach((item: paramType) => {
      if (selectedParamNameList.indexOf(item.dictName) == -1) {
        item.isDisabled = false
      }

      if (e == item.dictName) {
        item.isDisabled = true
      }
    })
  }

  // 校验上一项是否填写完整的函数
  const verifyLastParamStandardIsFullFunc = () => {
    console.log(props.paramStandardList)

    let flag = false
    if (props.paramStandardList.length == 0) {
      flag = true
    } else {
      let verifyParamName = props.paramStandardList[props.paramStandardList.length - 1].paramName
      let verifyParamTypeName =
        props.paramStandardList[props.paramStandardList.length - 1].paramTypeName
      let verifyStandRangeLeft =
        props.paramStandardList[props.paramStandardList.length - 1].standRangeLeft
      let verifyStandRangeRight =
        props.paramStandardList[props.paramStandardList.length - 1].standRangeRight
      let verifyStandRangeSingle =
        props.paramStandardList[props.paramStandardList.length - 1].standRangeSingle

      console.log(verifyParamName, 'verifyParamName')
      console.log(verifyParamTypeName, 'verifyParamTypeName')
      console.log(verifyStandRangeLeft, 'verifyStandRangeLeft')
      console.log(verifyStandRangeRight, 'verifyStandRangeRight')
      console.log(verifyStandRangeSingle, 'verifyStandRangeSingle')

      if (verifyParamTypeName == '两者之间') {
        console.log('两者之间')
        if (verifyStandRangeLeft != '' && verifyStandRangeRight != '') {
          if (verifyParamName != '') {
            flag = true
          }
        }
      } else {
        if (verifyStandRangeSingle != '') {
          console.log('大于小于')
          if (verifyParamName != '') {
            flag = true
          }
        }
      }
    }

    return flag
  }

  // 添加参数标准项的点击事件
  const addParamStandardClick = () => {
    const flag = verifyLastParamStandardIsFullFunc()
    if (!flag) {
      message.warning('在添加下一参数标准项之前，请确保上一个参数标准项信息填写完整!')
      return
    }

    let obj = {
      paramName: '',
      paramTypeName: '两者之间',
      standRangeLeft: '',
      standRangeRight: '',
      standRangeSingle: '',
      standRangeDesc: '',
      standRangeUnit: '',
      isDisabled: false
    }
    props.paramStandardList.push(obj)
    console.log(props.paramStandardList)
  }

  // 参数列表删除当前参数标准项的点击事件
  const delParamStandRangeItemClick = (paramName: string) => {
    console.log(paramName)
    let nParamStandardList = props.paramStandardList
    let indexd = 0
    nParamStandardList.forEach((item: paramStandard, index: number) => {
      if (item.paramName == paramName) {
        indexd = index
      }
    })

    // 删除参数标准项的时候将参数名称选择禁用状态取消
    props.paramDataList.forEach((item: paramType) => {
      if (item.dictName == paramName) {
        item.isDisabled = false
      }
    })
    nParamStandardList.splice(indexd, 1)
    props.paramStandardList = nParamStandardList
  }

  // // 查询参数列表的函数
  // const selectParamListFunc = async () => {
  //   const userId = getUserId()
  //   const res = await selectParamListApi({platFormSubUserId: userId})
  //   // console.log(res.data, 'paramList')
  //   props.paramDataList.value = res.data
  // }

  // // 查询设备列表的函数
  // const selectDevListFunc = async () => {
  //   const userId = getUserId()
  //   const res = await selectDevListApi({platFormSubUserId: userId})
  //   // console.log(res.data, 'devList')
  //   props.devDataList.value = res.data
  // }

  // // 当前的参数标准列表
  // const paramStandardList = ref<paramStandardList>([
  //   {
  //     paramName: '',
  //     paramTypeName: '两者之间',
  //     standRangeLeft: '',
  //     standRangeRight: '',
  //     standRangeSingle: '',
  //     standRangeDesc: '',
  //     standRangeUnit: '',
  //     isDisabled: false
  //   }
  // ])

  // // 参数范围类型选择框数据
  // const paramSelectTypeList = ref<standardSelectTypeList>([
  //   {
  //     id: 201,
  //     typeName: '两者之间'
  //   },
  //   {
  //     id: 202,
  //     typeName: '小于等于'
  //   },
  //   {
  //     id: 203,
  //     typeName: '大于等于'
  //   }
  // ])

  // // 参数列表数据
  // const paramDataList = ref<paramTypeList>([])
  // // 设备列表数据
  // const devDataList = ref<devTypeList>([])
  // // 初始化
  // onMounted(() => {
  //   selectParamListFunc()
  //   selectDevListFunc()
  // })
</script>

<style lang="less" scoped>
  ::v-deep .ant-card-body {
    padding: 20px 0px 20px 0px;
  }
  .card_wrap {
    width: 1160px;
    .title_box {
      padding: 3px 0px 3px 20px;
      font-size: 18px;
      letter-spacing: 2px;
      font-weight: bold;
      color: #324569;
      margin-bottom: 15px;
      background-image: url(https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/card-vein-inline.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .content_box {
      height: 466px;
      overflow-y: scroll;
      .content_item_box {
        position: relative;
        padding: 10px 0px 10px 75px;
        .paramNum_span {
          position: absolute;
          top: 50%;
          left: 1%;
          transform: translate(-5%, -50%);
          color: gray;
          font-size: 12px;
        }
        .paramTitle_span {
          font-weight: 500 !important;
          font-family: kaigengo-medium !important;
          --tw-text-opacity: 1 !important;
          color: rgb(41 48 53 / var(--tw-text-opacity)) !important;
          // margin-right: 10px;
        }
        .paramsSelect {
          margin-right: 16px;
        }

        .unit_span {
          margin: 0px 10px;
          color: gray;
          font-size: 12px;
        }

        .del_item_icon {
          cursor: pointer;
          font-size: 25px;
          position: absolute;
          right: 16px;
          top: 2%;
        }
      }
    }

    .param_footer_plus_box {
      margin-top: 30px;
      text-align: center;
      .param_plus_icon {
        cursor: pointer;
        font-size: 25px;
      }
    }
  }
</style>
./type.js
